import React, {useState, useRef, useEffect} from 'react';
import {ScrollView, Text, View, StyleSheet, TouchableOpacity, Image} from 'react-native';
import {useSelector} from "react-redux";


const TabItem = ({ title, isActive, onPress, onGetWidth,tabIndex,styType='sty1' }) => {
    const tabRef = useRef(null);

    useEffect(() => {
        if(isActive) {
            handlePress()
        }
    }, [tabIndex]);

    const handlePress = () => {
        if (tabRef.current) {
            tabRef.current.measure((_x, _y, width, _height, _pageX, _pageY) => {
                // 调用回调函数传递宽度信息
                onGetWidth(width);
            });
        }
        // 执行原始的点击处理逻辑
        onPress();
    };

    return (
        <>
            {styType === 'sty1' &&
                <TouchableOpacity
                    ref={tabRef}
                    style={[styles.sty1, isActive && styles.activeTabItem]}
                    onPress={handlePress}
                >
                    <Text style={[styles.tabText, isActive && styles.activeTabText]}>
                        {title}
                    </Text>
                </TouchableOpacity>
            }
            {styType === 'sty2' &&
                <View style={styles.sty2_box}>
                    <TouchableOpacity
                        ref={tabRef}
                        style={[styles.sty2]}
                        onPress={handlePress}
                    >
                        <Text style={[styles.tabText_sty2, isActive && styles.activeTabText]}>
                            {title}
                        </Text>
                    </TouchableOpacity>
                    <Text style={[styles.line,isActive&&styles.line_active]}></Text>
                </View>

            }
        </>
    );
};

type Props = {
    tabList?: Array<any>
    onClickMenuMore?:Function
}

const FcBtnScrollTab = ({tabList,onClickMenuMore,tabIndex=0,onTabClick,style,styType='sty1'}: Props) => {
    // const [activeTabIndex, setActiveTabIndex] = useState(tabIndex);
    const scrollViewRef = useRef(null);

    const handleTabPress = (index,item) => {
        // setActiveTabIndex(index);
        onTabClick(item,index)
    };

    const handleGetWidth = (val) => {
        // console.log('TabItem 的宽度是:', val.width);
        // 获取 ScrollView 实例
        const scrollView = scrollViewRef.current;
        if (scrollView) {

            // 获取要滚动到的 Tab 项的宽度
            // const tabWidth = val.width || 100; // 假设每个 Tab 项的宽度为 100
            const tabWidth = 100; // 假设每个 Tab 项的宽度为 100
            const offset = val.index * tabWidth;
            // 滚动到指定位置
            scrollView.scrollTo({ x: offset, y: 0, animated: true });
        }
    };
    function handleMore(): void {
        onClickMenuMore&&onClickMenuMore()
    }

    return (
        <View style={[styles.container,style]}>
            <ScrollView
                ref={scrollViewRef}
                horizontal
                showsHorizontalScrollIndicator={false}
                style={[styles.tabScrollView,styles[`tabScrollView_${styType}`]]}
                contentContainerStyle={styles.tabContainer}
            >
                {tabList?.map((item, index) => (
                    <TabItem
                        key={index}
                        title={item.title}
                        isActive={index === tabIndex}
                        tabIndex={tabIndex}
                        styType={styType}
                        onPress={() => handleTabPress(index,item)}
                        onGetWidth={(val)=>handleGetWidth({width:val,...item,index})}
                    />
                ))}
            </ScrollView>
            <View style={styles.btn_wrap}>
                <Image style={styles.bg}
                       source={require('@/assets/images/public/mh_bg.png')}></Image>
                <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: 'rgba(0,0,0,0.9)',flexShrink: 0}} onPress={handleMore}>&#xe660;</Text>
            </View>
            {/*<View style={styles.contentContainer}>*/}
            {/*    <Text>Content for {tabTitles[tabIndex]}</Text>*/}
            {/*</View>*/}
        </View>
    );
};

export default FcBtnScrollTab;

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
    },
    tabScrollView: {
        // backgroundColor: '#f0f0f0',
        height: 28,
        paddingHorizontal: 16
    },
    tabScrollView_sty2:{
        height: 43,
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(0,0,0,0.1)',
        paddingHorizontal: 16
    },
    tabContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    sty1: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 10,
        marginHorizontal: 4,
        height: 28,
        borderRadius: 20,
        backgroundColor: '#F1F2F4',
    },
    sty2_box: {
        height: 43,
      flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-end',
        marginHorizontal: 8,
    },
    sty2:{

    },
    line: {
        width: 18,
        height: 2,
        backgroundColor: 'transparent',
        marginTop: 11,
        borderRadius: 20,
    },
    line_active: {
        backgroundColor: '#2856FF',
    },
    activeTabItem: {
        backgroundColor: 'rgba(40, 86, 255, 0.1)',
    },
    tabText: {
        fontSize: 14,
        color: 'rgba(0, 0, 0, 0.5)',
    },
    tabText_sty2: {
        fontSize: 14,
        color: 'rgba(0, 0, 0, 0.9)',
    },
    activeTabText: {
        color: '#2856FF',
    },
    contentContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    btn_wrap:{
        flexShrink: 0,
        position: "relative",
        marginTop: -2
    },
    bg: {
        position: "absolute",
        top: -5,
        left: -18,
        width: 40,
        height: 28,

    }
});
